import { HTMLInputTypeAttribute } from 'react';
import cn from '../cn';

type InputProps = {
  name?: string;
  type?: HTMLInputTypeAttribute;
  className?: string;
  required?: boolean;
  placeholder?: string;
  value?: string;
  autoComplete?: string;
  block?: boolean;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  noRound?: boolean;
};

export default function Input(props: InputProps) {
  const { name, type, className, required, value, onBlur, onChange, block, placeholder, autoComplete } = props;

  const { noRound } = props;

  // TODO: 重新分类
  const focus = 'focus:ring-2 focus:ring-inset focus:ring-indigo-600';
  const color = 'text-gray-900 shadow-sm ring-gray-300 placeholder:text-gray-400';
  const padding = 'py-1.5 px-3';
  const border = 'border-0';
  const round = noRound === true ? '' : 'rounded-md';
  const shadow = 'shadow-sm ring-1 ring-inset';

  const blockClass = block ? 'block w-full' : undefined;

  return (
    <input
      name={name}
      type={type}
      value={value}
      onBlur={onBlur}
      onChange={onChange}
      autoComplete={autoComplete}
      required={required}
      placeholder={placeholder}
      className={cn(focus, color, padding, border, round, shadow, className, blockClass, 'sm:text-sm sm:leading-6')}
    />
  );
}
